<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
		<link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
		<link rel="stylesheet" href="/Public/css/style.css" />
		<style type="text/css">
			body{
				background-color: #F4F4F4;
			}
			.list{
				width: 100%;
				background-color: #FFF;
				padding: 0 10px;			
			}
			.list-li{
			    width: 100%;						   			
			    color: #444;		
			     border-bottom: 1px solid #E4E3E6;
			     overflow: hidden;	
			     font-size: 15px;    
			}
			.list-li p{
				 height: 45px;
				 line-height: 45px;				 
			}
			.list-li i{
				margin-right: 8px;
			}
			.items{
				background-color: #FFF;
				display: none;
			}
			.items li{
				position: relative;
				border-bottom: 1px solid #DDD;
				padding-top: 20px;
				padding-bottom: 10px;
				font-size: 13px;
			}
			.items li:last-child{
				border-bottom: none;
			}
			.items p{
				line-height: normal;
				height: initial;
				line-height: 24px;
			}
			.items p.over{
				white-space: nowrap;
				overflow: hidden;
				height: 24px;
				text-overflow: ellipsis;
			}
			.fa-circle{
				color: #FC2E27;
			}
			.fa-circle-o{
				color:#3BEA52 ;
			}
			.time{
				position: absolute;
				right: 0;
				top: 5px;
				color: #999;
				font-size: 12px;
			}
			.number{
				margin-left: 15px;
				font-size: 13px;
			}
			.icon{
				width: 15px;
				height: 15px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<header class="header">
			<a href="javascript:;" onclick="history.go(-1)" class="back"><i class="fa fa-angle-left"></i></a>
			<h1>消息通知</h1>
		</header>
		<div id="app">
			<ul class="list">
				<li v-for="(list,index) in lists" class="list-li" @click="toggle($event,index)">					
					<p><i class="fa fa-caret-right icon"></i>{{list.date}}<span class="number">( {{list.num}} 条 )</span></p>
					<ul class="items">
						<li v-for="(item,textindex) in list.items" @click.stop.prevent="toggletext($event,index,textindex)"><p class="over"><i class="fa" :class="item.type == 0?'fa-circle':'fa-circle-o'"></i>{{item.text}}</p><span class="time">{{item.time}}</span></li>
					</ul>
				</li>
			</ul>
		</div>
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					lists:[]
				},
				created:function(){
                    this.$http.get('/notices/notice',{emulateJSON: true}).then(function(res){		//初始化赋值
                            if(res.data.data.length){
                                vm.lists = res.data.data;
                            }
                    },function(){

                    });
				},
				methods:{					//错误抛出
					error:function(res){
						console.error("错误类型:"+res.status,"错误描述:"+res.statusText);
					},
					toggle:function(event,index){
						var items = $(event.currentTarget).find('.items');
						var myindex = index;
						if(items.is(':hidden')){
							$.each($('.list li.list-li'), function(index) {
								if(index == myindex){	
									$(this).find('.icon')[0].className = 'fa fa-caret-down icon';
									items.slideDown(200);
								}else{		
									$('.list li.list-li').eq(index).find('.icon')[0].className = 'fa fa-caret-right icon';
									$('.list li.list-li').eq(index).find('.items').slideUp(200);
								}
							});							
						}else{
							items.slideUp(200);
							items.parents('.list-li').find('.icon')[0].className = 'fa fa-caret-right icon';
												
						};
					},
					toggletext:function(event,index,textindex){
						if(this.lists[index].items[textindex].type == 0){
							this.lists[index].items[textindex].type = 1;
							var id = this.lists[index].items[textindex].id;
                            this.$http.post('/notices/is_see',{id:id},{emulateJSON: true}).then(function(res){		//初始化赋值
                                if(res.data.data.length){
                                    vm.lists = res.data.data;
                                }
                            },function(){

                            });
						};											
						if($(event.currentTarget).find('p').hasClass('over')){							
							$(event.currentTarget).find('p').removeClass('over');
						}else{
							$(event.currentTarget).find('p').addClass('over');
						}
					}
				}
			});
		</script>
	</body>
</html>
